<template>
  <div>
    <!-- 押金明细 -->
    <el-drawer
      title="押金信息"
      :visible.sync="visible"
      :with-header="false"
      direction="rtl"
    >
      <div class="title">
        <div class="title-text">{{ temp.csmName }}({{ temp.csmCode }})</div>
        <el-tag class="tag">{{ formatColumnMap(customerType, "value", temp.csmType, "desc") }}</el-tag>
        <el-tag class="tag" :type="statusFormat(temp.depStatus)">{{ formatColumnMap(depositStatusMap, "value", temp.depStatus, "desc") }}</el-tag>
        <el-tag v-if="temp.isSplit" class="tag" type="danger">押金已拆单</el-tag>
      </div>
      <div class="popups-info">
        <div class="form">
          <el-collapse v-model="activeNames" class="collapse">
            <el-collapse-item title="客户信息" name="1">
              <el-descriptions size="medium" :label-style="labelStyle" :content-style="contentStyle">
                <el-descriptions-item label="客户名称">{{ temp.csmName }}</el-descriptions-item>
                <el-descriptions-item label="客户编号">{{ temp.csmCode }}</el-descriptions-item>
                <el-descriptions-item label="用气性质">{{ formatColumnMap(subTypeAllList, "value", temp.subType, "label") }}</el-descriptions-item>
                <el-descriptions-item label="身份证姓名">{{ temp.sfzhName }}</el-descriptions-item>
                <el-descriptions-item label="身份证号">{{ temp.csmCardNo }}</el-descriptions-item>
                <el-descriptions-item v-if="temp.csmType === 2" label="营业执照信息">{{ temp.cardNoBus }}</el-descriptions-item>
                <el-descriptions-item label="身份证地址"><span :title="temp.sfzhAddress">{{ temp.sfzhAddress }}</span></el-descriptions-item>
                <el-descriptions-item label="联系电话"><span :title="temp.csmPhone">{{ temp.csmPhone }}</span></el-descriptions-item>
                <el-descriptions-item :span="2" label="联系地址"><span :title="temp.csmAddress">{{ temp.csmAddress }}</span></el-descriptions-item>
                <el-descriptions-item label="客户气瓶条码"><el-link type="primary" :underline="false" @click="openOccupy(temp)">查看详情</el-link></el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
            <el-collapse-item title="押金信息" name="2">
              <el-descriptions size="medium" :label-style="labelStyle" :content-style="contentStyle">
                <el-descriptions-item label="押金单号">{{ temp.depositCode }}</el-descriptions-item>
                <el-descriptions-item v-if="temp.oldDepositCode" label="原押金单号"><el-link type="primary" :underline="false" @click="showDepositDetail">{{ temp.oldDepositCode }}</el-link></el-descriptions-item>
                <el-descriptions-item label="押瓶机构">{{ temp.ckOrgName }}</el-descriptions-item>
                <el-descriptions-item label="单据状态"><span :style="statusFormat2(temp.depStatus)">{{ formatColumnMap(depositStatusMap, "value", temp.depStatus, "desc") }}</span></el-descriptions-item>
                <el-descriptions-item label="收据单号">{{ temp.billCode }}</el-descriptions-item>
                <el-descriptions-item label="开始时间">{{ temp.beginDt ? parseTime(temp.beginDt, "{y}/{m}/{d}") : "" }}</el-descriptions-item>
                <el-descriptions-item label="结束时间">{{ temp.endDt ? parseTime(temp.endDt, "{y}/{m}/{d}") : "" }}</el-descriptions-item>
                <el-descriptions-item label="手续费">{{ temp.fee1 }}</el-descriptions-item>
                <el-descriptions-item label="支付状态"><span :style="statusFormat3(temp.payStatus)">{{ payStatus }}</span></el-descriptions-item>
                <el-descriptions-item label="经办人">{{ temp.transactor }}</el-descriptions-item>
                <el-descriptions-item label="收款人">{{ temp.depReceiver }}</el-descriptions-item>
                <el-descriptions-item label="收款方式">{{ calcType }}</el-descriptions-item>
                <el-descriptions-item label="支付方式">{{ paymentMethod }}</el-descriptions-item>
                <el-descriptions-item label="押金来源">{{ temp.fromPlat === 1 ? '运气到家' : temp.fromPlat === 2 ? '微信公众号' : temp.fromPlat === 3 ? '支付宝小程序' : temp.fromPlat === 4 ? '好运气平台' : '' }}</el-descriptions-item>
                <el-descriptions-item label="总租金">{{ temp.totalRental }}元</el-descriptions-item>
                <el-descriptions-item label="实退押金">{{ temp.accReturnDeposit }}元</el-descriptions-item>
                <el-descriptions-item label="备注">{{ temp.remark }}</el-descriptions-item>
                <el-descriptions-item v-if="temp.refundReason" label="退款原因"><span :title="temp.refundReason">{{ temp.refundReason }}</span></el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
            <el-collapse-item title="押瓶信息" name="3">
              <lb-table
                ref="lbTable"
                border
                highlight-current-row
                element-loading-text="加载中"
                :column="tableData.column"
                :data="tableData.data.rows"
                :pagination="false"
                show-summary
                :summary-method="getSummaries"
                align="center"
              />
            </el-collapse-item>
            <el-collapse-item v-if="temp.isSplit" title="拆单信息" name="8">
              <lb-table
                ref="lbTable1"
                border
                highlight-current-row
                element-loading-text="加载中"
                :column="tableData1.column"
                :data="tableData1.data.rows"
                :pagination="false"
                align="center"
              />
            </el-collapse-item>
            <el-collapse-item title="扫瓶信息" name="4">
              <el-descriptions size="medium" class="sweepBottle " :column="2" :label-style="labelStyle" border>
                <el-descriptions-item label-class-name="c-label" label="提瓶时间">{{ temp.takeBottleDt ? parseTime(temp.takeBottleDt, "{y}-{m}-{d} {h}:{i}:{s}") : "" }}</el-descriptions-item>
                <el-descriptions-item label-class-name="c-label" label="提瓶人">{{ temp.takeBottleUser }}</el-descriptions-item>
                <el-descriptions-item label-class-name="c-label" label="重瓶编号">{{ temp.newGPBMIDS }}</el-descriptions-item>
                <el-descriptions-item label-class-name="c-label" label="重瓶芯片号" content-class-name="descFullContent">
                  <span v-for="(item, index) in temp.newChipIDS" :key="index" class="csmCode" @click="showCylinderDetail(item, temp.newGPBMIDS ? temp.newGPBMIDS.split(',')[index]: '')">
                    {{ item }}
                    <span v-if="index !== temp.newChipIDS.length-1">,</span>
                  </span>
                </el-descriptions-item>
                <el-descriptions-item label-class-name="c-label" label="关联单号" :span="2"><span class="csmCode" @click="openOrderDetail">{{ temp.orderCode }}</span></el-descriptions-item>
                <el-descriptions-item label-class-name="c-label" label="消单扫瓶时间">{{ temp.recycleDepInfo && (temp.recycleDepInfo.auditTime ? parseTime(temp.recycleDepInfo.auditTime, "{y}-{m}-{d} {h}:{i}:{s}") : "") }}</el-descriptions-item>
                <el-descriptions-item label-class-name="c-label" label="消单扫瓶人">{{ temp.recycleDepInfo && temp.recycleDepInfo.auditor }}</el-descriptions-item>
                <!-- 还瓶审核时间和还瓶审核人暂时置为-- -->
                <el-descriptions-item label-class-name="c-label" label="还瓶审核时间">{{ '--' }}</el-descriptions-item>
                <el-descriptions-item label-class-name="c-label" label="还瓶审核人">{{ '--' }}</el-descriptions-item>
                <el-descriptions-item label-class-name="c-label" label="空瓶编号">{{ temp.recycleDepInfo && temp.recycleDepInfo.newGPBMIDS }}</el-descriptions-item>
                <el-descriptions-item label-class-name="c-label" label="空瓶芯片号" content-class-name="descFullContent">
                  <template v-if="temp.recycleDepInfo">
                    <span v-for="(item, index) in temp.recycleDepInfo.newChipIDS" :key="index" class="csmCode" @click="showCylinderDetail(item, temp.recycleDepInfo.newGPBMIDS ? temp.recycleDepInfo.newGPBMIDS.split(',')[index]: '')">
                      {{ item }}
                      <span v-if="index !== temp.recycleDepInfo.newChipIDS.length-1">,</span>
                    </span>
                  </template>
                </el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
            <el-collapse-item title="附件信息" name="5">
              <el-image v-if="temp.depositUrl" class="image" fit="fill" :src="imgBaseUrl+temp.depositUrl" :preview-src-list="[imgBaseUrl+temp.depositUrl]" />
              <el-image v-if="temp.field_1" class="image" fit="fill" :src="imgBaseUrl+temp.field_1" :preview-src-list="[imgBaseUrl+temp.field_1]" />
              <el-image v-if="temp.depositUrl2" class="image" fit="fill" :src="imgBaseUrl+temp.depositUrl2" :preview-src-list="[imgBaseUrl+temp.depositUrl2]" />
              <el-image v-if="temp.depositUrl3" class="image" fit="fill" :src="imgBaseUrl+temp.depositUrl3" :preview-src-list="[imgBaseUrl+temp.depositUrl3]" />
              <el-image v-if="temp.depositUrl4" class="image" fit="fill" :src="imgBaseUrl+temp.depositUrl4" :preview-src-list="[imgBaseUrl+temp.depositUrl4]" />
              <el-image v-if="temp.depositUrl5" class="image" fit="fill" :src="imgBaseUrl+temp.depositUrl5" :preview-src-list="[imgBaseUrl+temp.depositUrl5]" />
              <el-image v-if="temp.depositUrl6" class="image" fit="fill" :src="imgBaseUrl+temp.depositUrl6" :preview-src-list="[imgBaseUrl+temp.depositUrl6]" />
            </el-collapse-item>
            <el-collapse-item title="押金照片信息" name="6">
              <template v-if="temp.depositrgPic">
                <el-image v-for="(i,index) in temp.depositrgPic" :key="index" class="image" fit="fill" :src="imgBaseUrl+i" :preview-src-list="[imgBaseUrl+i]" />
              </template>
            </el-collapse-item>
            <el-collapse-item title="经办信息" name="7">
              <el-descriptions size="medium" :label-style="labelStyle" :content-style="contentStyle">
                <el-descriptions-item v-if="temp.auditor" label="审核人">{{ temp.auditor }}</el-descriptions-item>
                <el-descriptions-item v-if="temp.auditor" label="审核人机构">{{ temp.ckOrgName }}</el-descriptions-item>
                <el-descriptions-item v-if="temp.auditor" label="审核时间">{{ temp.auditDt ? parseTime(temp.auditDt, "{y}/{m}/{d}  {h}:{i}:{s}") : "" }}</el-descriptions-item>
                <el-descriptions-item v-if="temp.operator" label="消单人">{{ temp.operator }}</el-descriptions-item>
                <el-descriptions-item v-if="temp.operator" label="消单人机构">{{ temp.returnOrgName }}</el-descriptions-item>
                <el-descriptions-item v-if="temp.operator" label="消单时间">{{ temp.operateDt ? parseTime(temp.operateDt, "{y}/{m}/{d}") : "" }}</el-descriptions-item>
              </el-descriptions>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="timeline">
          <div class="timeline-title">流转信息</div>
          <el-timeline v-if="data.length>0">
            <el-timeline-item v-for="(item, index) in data" :key="index" :timestamp="`${parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}')} ${item.createUser}`" placement="top">
              <el-card>
                <h4>{{ item.traceDesc }}</h4>
                <h4 v-if="item.marker">{{ item.marker + ':' }}{{ item.other }}</h4>
                <p>{{ `发生部门&nbsp;——&nbsp;${item.orgName ? item.orgName : '系统'}` }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class="bottom">
        <div class="btn-group">
          <div class="btns">
            <el-button v-if="temp.depStatus === 1 && temp.payStatus === 1 || temp.depStatus === 1 && temp.payStatus === 3 || temp.depStatus === 5" v-show="$btnPermission([20201, 11])" type="primary" :disabled="readOnly" @click="openNormalReceipts">编辑</el-button>
            <el-button v-if="temp.payStatus === 1" v-show="$btnPermission([20201, 20])" type="primary" @click="openReceipt">收款</el-button>
            <el-button v-if="!(temp.depStatus !== 1 || (temp.depStatus === 1 && temp.payStatus === 1))" v-show="$btnPermission([20201, 12])" type="primary" @click="openDepositAudit">审核</el-button>
            <el-button v-if="temp.depStatus === 2" v-show="$btnPermission([20201, 5])" type="primary" @click="openTurnOrder">退瓶消单</el-button>
            <el-button v-if="temp.depStatus === 6" v-show="$btnPermission([20201, 17])" type="primary" @click="openOrderConfirmationNew">消单确认</el-button>
            <el-button v-if="(temp.depStatus === 2 && temp.payStatus === 3 && temp.isTakeBottle !== 2)" v-show="$btnPermission([20201, 6])" type="primary" @click="liftingBottle(temp)">提瓶</el-button>
            <el-button v-if="(temp.depStatus === 2 && temp.payStatus === 3 && temp.isTakeBottle === 2)" v-show="$btnPermission([20201, 18])" type="primary" @click="liftingBottleReturn(temp)">提瓶撤回</el-button>
            <el-button v-if="(temp.depStatus === 2 && temp.payStatus === 3 && temp.outStatus !== 2)" v-show="$btnPermission([20201, 7])" type="primary" @click="outStore(temp)">出库</el-button>
            <el-button v-if="(temp.depStatus === 2 && temp.payStatus === 3 && temp.outStatus === 2)" v-show="$btnPermission([20201, 19])" type="primary" @click="outStoreReturn(temp)">出库撤回</el-button>
            <el-button v-if="(temp.depStatus === 2 && temp.payStatus === 3 && temp.totalCount > 1)" v-show="$btnPermission([20201, 21])" type="primary" @click="splitOrder(temp)">拆单</el-button>

            <!-- <el-button v-if="temp.depStatus === 2" v-show="$btnPermission([20201, 8])" type="primary" @click="revertAudit">租瓶反审核</el-button> -->
            <!-- <el-button v-if="temp.depStatus === 3" v-show="$btnPermission([20201, 14])" type="primary" @click="revertReturn">退瓶反消单</el-button> -->
            <el-button v-if="(temp.depStatus === 2 && temp.reStatus === 2)" v-show="$btnPermission([20201, 22])" type="primary" @click="openReceiptConfirm(temp)">回执确认</el-button>
            <el-button v-if="temp.depStatus === 2" v-show="$btnPermission([20201, 9])" type="primary" @click="printDep">开户打印</el-button>

            <!-- <el-button v-if="!(temp.payStatus === 1 || temp.depStatus !== 2) " v-show="getPermission(12)" type="primary" @click="printDepNew(temp, 1)">开户打印</el-button> -->
            <el-button v-if="temp.depStatus === 3" v-show="$btnPermission([20201, 15])" type="primary" @click="returnPrint(temp, 1)">退瓶打印</el-button>
            <el-button v-if="temp.depStatus === 3" v-show="$btnPermission([20201, 16])" type="primary" @click="returnPrint(temp, 2)">退款打印</el-button>
            <el-button v-if="temp.depStatus === 2" v-show="$btnPermission([20201, 10])" type="primary" @click="toAuditedEdit(temp)">已审核编辑</el-button>
            <el-button v-if="(temp.depStatus === 1 && temp.payStatus === 1 || temp.depStatus === 1 && temp.payStatus === 3 && temp.paymentMethod === 1)" v-show="$btnPermission([20201, 13])" type="primary" @click="onCancellation">作废</el-button>
            <el-button v-if="temp.fromPlat === 4" v-show="$btnPermission([20201, 24])" type="primary" @click="toUploadContract(temp)">上传电子合同</el-button>
            <el-button v-if="temp.isSign === 1" v-show="$btnPermission([20201, 23])" type="primary" @click="showEleContact(temp)">查看电子合同</el-button>
          </div>
          <el-button @click="reset">关闭</el-button>
        </div>
      </div>
      <normal-receipts-add ref="normalReceiptsAdd" :tree-data="treeData" :calc-type-list="calcTypeList" :paymen-fil-list="paymenFilList" @upDataTable="upDataTable" />
      <receipt ref="receipt" @upDataReceipt="upDataTable" />
      <depositAudit ref="depositAudit" :calc-type-list="calcTypeList" :pay-status-list="payStatusList" :payment-method-list="paymentMethodList" @depUpDataTable="upDataTable" />
      <turnOrder ref="turnOrder" :calc-type-list="calcTypeList" :paymen-fil-list="paymenFilList" :tree-data="treeData" @turnUpDataTable="upDataTable" />
      <orderConfirmationNew ref="orderConfirmationNew" :calc-type-list="calcTypeList" :paymen-fil-list="paymenFilList" :tree-data="treeData" @upDataTable="upDataTable" />
      <!-- <transferInformation ref="transferInformation" /> -->
      <liftingBottle ref="liftingBottle" :tree-data="treeData" @upDataTable="upDataTable" />
      <receipt-confirm ref="receiptConfirm" :payment-method-map="paymenFilList" />
      <auditedEdit ref="auditedEdit" :calc-type-list="calcTypeList" :pay-status-list="payStatusList" :payment-method-list="paymentMethodList" @depUpDataTable="upDataTable" />
      <UploadContract ref="uploadContract" />
      <occupy ref="occupy" />
    </el-drawer>
    <cylinderDetail ref="cylinderDetail" />
    <order-detail
      ref="orderDetail"
      :payment-method-map="paymentMethodMap"
      :pay-status-map="payStatusMap"
      :transactor-list="transactorList"
      :order-flag-map="orderFlagMap"
      :order-source-map="orderSourceMap"
      :order-status-map="orderStatusMap"
    />
    <Popups
      v-if="temp.oldDepositCode"
      :ref="`popups-${temp.oldDepositCode}`"
      :ent-type-list="entTypeList"
      :tree-data="treeData"
      :calc-type-list="calcTypeList"
      :payment-method-list="paymentMethodList"
      :pay-status-list="payStatusList"
      :paymen-fil-list="paymenFilList"
      :customer-type="customerType"
      :parent-fetch-data="upDataTable"
    />
  </div>
</template>

<script>
  import NormalReceiptsAdd from '@/views/components/NormalReceiptsAdd'
  import Receipt from './Receipt'
  import DepositAudit from './DepositAudit'
  import orderConfirmationNew from './orderConfirmationNew'
  // import TransferInformation from './TransferInformation'
  import TurnOrder from './TurnOrder'
  import liftingBottle from './liftingBottle'
  import ReceiptConfirm from './ReceiptConfirm'
  import auditedEdit from './auditedEdit'
  import CylinderDetail from '@/views/components/cylinderDetail/index'
  import OrderDetail from '@/views/orderCenter/orderManage/components/OrderDetails'
  import UploadContract from './UploadContract'
  import Occupy from '@/views/customerCenter/customerManage/components/Occupy.vue'
  import { querySubTypeMap, queryCashPledgeDetail, commonTansferInfo, customerInfo, queryRevertReturn, queryCashPledgeInvalid, queryRevertAudit, showEleContact,
           depositCancelTakeBottle, depositTakeOutBottle, depositCancelTakeOutBottle, depositExcreteDepositCodes, customerAttachment, queryMap, queryTransactorList } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  import { imgBaseUrl } from '@/utils/config'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { mapGetters } from 'vuex'
  import store from '@/store'
  export default {
    name: 'popups',
    components: {
      NormalReceiptsAdd, Receipt, DepositAudit, orderConfirmationNew,
      //  TransferInformation,
      TurnOrder, liftingBottle, ReceiptConfirm, auditedEdit, CylinderDetail, OrderDetail, UploadContract, Occupy,
      Popups: () => import('./Popups.vue') // 引入自身实现递归
    },
    props: {
      parentFetchData: {
        type: Function
      },
      entTypeList: {
        type: Array
      },
      treeData: {
        type: Array
      },
      calcTypeList: {
        type: Array
      },
      paymentMethodList: {
        type: Array
      },
      payStatusList: {
        type: Array
      },
      paymenFilList: {
        type: Array
      },
      customerType: {
        type: Array
      }
    },
    data() {
      return {
        parseTime: parseTime,
        readOnly: false,
        activeNames: ['1', '2', '3', '4', '5', '7', '8'],
        imgBaseUrl,
        visible: false,
        check_field: false,
        returned_field: false,
        clickNum: 1,
        temp: {},
        infoTy: 'info',
        depositStatusMap: [
          { 'value': 1, 'desc': '未审核', 'key': 'NOT_AUDIT' },
          { 'value': 2, 'desc': '已审核', 'key': 'AUDITED' },
          { 'value': 3, 'desc': '已消单', 'key': 'RETURNED' },
          { 'value': 4, 'desc': '已作废', 'key': 'VOIDED' },
          { 'value': 5, 'desc': '审核不通过', 'key': 'NOT_PASS' },
          { 'value': 6, 'desc': '消单待确认', 'key': 'RETURN_APPLY' }
        ],
        tableData: {
          column: [
            // {
            //   prop: 'goodsCount',
            //   label: '序号',
            //   width: 60
            // },
            {
              prop: 'goodsName',
              label: '规格型号',
              width: 120
            },
            {
              prop: 'rental',
              label: '单个租金（元）',
              width: 120
            },
            {
              prop: 'deposit',
              label: '单个押金(元)',
              width: 120
            },
            {
              prop: 'goodsCount',
              label: '数量'
            },
            {
              prop: 'totalDeposit',
              label: '总押金(元)',
              width: 120
            },
            {
              prop: 'btNoIDS',
              label: '气瓶号'
            }
          ],
          data: {
            rows: []
          }
        },
        tableData1: {
          column: [
            {
              prop: 'depositCode',
              label: '押金单号'
            },
            {
              prop: 'totalCount',
              label: '数量'
            }
          ],
          data: {
            rows: []
          }
        },
        data: [],
        subTypeAllList: [],
        labelStyle: { 'white-space': 'nowrap' },
        contentStyle: { 'word-break': 'break-all' },
        paymentMethodMap: [],
        payStatusMap: [],
        orderStatusMap: [],
        orderFlagMap: [],
        orderSourceMap: [],
        transactorList: []
      }
    },
    computed: {
      // 样式
      active: function() {
        return this.temp.depositUrl ? '55%' : '100%'
      },
      // 开始时间
      beginDt: function() {
        return parseTime(this.temp.beginDt, '{y}-{m}-{d}')
      },
      // 收款方式
      calcType: function() {
        return formatColumnMap(this.calcTypeList, 'value', this.temp.calcType, 'desc')
      },
      // 支付方式
      paymentMethod: function() {
        return formatColumnMap(this.paymentMethodList, 'value', this.temp.paymentMethod, 'desc')
      },
      // 支付状态
      payStatus: function() {
        return formatColumnMap(this.payStatusList, 'value', this.temp.payStatus, 'desc')
      },
      // 经办时间
      transactDt: function() {
        return this.temp.transactDt && parseTime(this.temp.transactDt, '{y}-{m}-{d}')
      },
      // 审核时间
      auditDt: function() {
        return this.temp.auditDt && parseTime(this.temp.auditDt, '{y}-{m}-{d} {h}:{i}')
      },
      // 结束时间
      endDt: function() {
        return this.temp.endDt && parseTime(this.temp.endDt, '{y}-{m}-{d}')
      },
      // 消单时间
      operateDt: function() {
        return this.temp.operateDt && parseTime(this.temp.operateDt, '{y}-{m}-{d} {h}:{i}:{s}')
      },
      ...mapGetters([
        'orgList', 'menusArr'
      ])
    },
    created() {

    },
    methods: {
      formatColumnMap,
      showDepositDetail() {
        this.$refs[`popups-${this.temp.oldDepositCode}`].open({ depositCode: this.temp.oldDepositCode, depositId: 0, depStatus: 0 })
      },
      // 气瓶详情
      async showCylinderDetail(val, code) {
        if (val) {
          await this.$refs.cylinderDetail.open(val, code)
        } else {
          this.$message.warning('暂无相关信息')
        }
      },
      // 点击订单号
      async openOrderDetail() {
        const row = {
          orderCode: this.temp.orderCode
        }
        await this.$refs.orderDetail.open(row, true)
      },
      async open(temp, isTy) {
        await this.queryOptionsMap()
        const res1 = await querySubTypeMap({ })
        this.subTypeAllList = res1.data
        if (temp.depStatus >= 2) {
          this.check_field = true
        }
        if (temp.depStatus === 3) {
          this.returned_field = true
        }
        // 请求接口
        const res = await queryCashPledgeDetail({
          depCode: temp.depositCode,
          depositId: temp.depositId,
          depStatus: temp.depStatus
        })
        this.infoTy = isTy
        this.temp = res.data
        if (this.temp.newGPBMIDS) {
          const newGPBMIDS = this.temp.newGPBMIDS.split(',')
          newGPBMIDS.forEach((item, index) => {
            if (item === '11111111') {
              newGPBMIDS[index] = '未知'
            }
          })
          this.temp.newGPBMIDS = newGPBMIDS.join(',')
        }
        this.temp.newChipIDS = res.data.newChipIDS ? res.data.newChipIDS.split(',') : []
        if (res.data.recycleDepInfo) this.temp.recycleDepInfo.newChipIDS = res.data.recycleDepInfo.newChipIDS ? res.data.recycleDepInfo.newChipIDS.split(',') : []
        if (res.data.depositrgPic) this.temp.depositrgPic = res.data.depositrgPic.split(',')
        this.tableData.data.rows = res.data.depositDetails
        this.tableData1.data.rows = res.data.depositrgSplitList || []
        this.getLineTime()
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3, res4, res5] = await Promise.all([
          mergeAsyncFunc(queryMap, { enumName: 'PaymentMethod' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderFlag' }),
          mergeAsyncFunc(queryMap, { enumName: 'PayStatus' }),
          mergeAsyncFunc(queryMap, { enumName: 'OrderSource' })
        ])
        this.paymentMethodMap = res1.data.filter(item => item.value === 1 || item.value === 2 || item.value === 16 || item.value === 128 || item.value === 256 || item.value === 2048) // 支付方式
        this.orderStatusMap = res2.data.filter((item) => item.value !== 6) // 订单类型(去掉‘已转派’)
        this.orderFlagMap = res3.data // 订单类型
        this.payStatusMap = res4.data // 支付状态
        this.orderSourceMap = res5.data // 订单来源
        this.getTransactorList()
      },
      // 获取下单人列表
      async getTransactorList() {
        const res = await queryTransactorList({})
        this.transactorList = res.data
      },
      async getLineTime() {
        const res = await commonTansferInfo({
          billCode: this.temp.depositCode,
          billType: 8
        })
        this.data = res.data
        if (this.data.length > 0) {
          document.getElementsByClassName('el-drawer')[0].style.width = '90% !important'
        }
      },
      rollImg(e) {
        var image = this.$refs.image
        const transform = image.style.transform
        let zoom = transform.indexOf('scale') !== -1 ? +transform.split('(')[1].split(')')[0] : 1
        zoom += e.wheelDelta / 1200
        if (zoom > 0.1 && zoom < 2) {
          image.style.transform = 'scale(' + zoom + ')'
        }
      },
      // 颜色
      statusFormat(val) {
        var typeObj = {
          '1': 'default', // 待审核
          '2': 'success', // 已审核
          '3': 'info', // 已消单
          '4': 'info', // 已作废
          '5': 'warning', // 审核不通过
          '6': 'danger' // 消单待确认
        }
        return typeObj[val]
      },
      statusFormat2(val) {
        var colorObj = {
          '1': 'color: #38BDBD;', // 待审核
          '2': 'color: #67c23a;', // 已审核
          '3': 'color: #909399;', // 已消单
          '4': 'color: #909399;', // 已作废
          '5': 'color: #e6a23c;', // 审核不通过
          '6': 'color: #f56c6c;' // 消单待确认
        }
        return colorObj[val]
      },
      statusFormat3(val) {
        var colorObj = {
          '3': 'color: #67c23a;', // 已支付
          '1': 'color: #909399;'// 未支付
        }
        return colorObj[val]
      },
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计'
            return
          }
          const noSumArray = [
            'rental',
            'deposit',
            'btNoIDS'
          ]
          if (noSumArray.includes(column.property)) {
            return
          }
          const values = data.map((item) => Number(item[column.property]))
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        })
        sums.forEach((v, index) => {
          // 规格型号和数量字段合计不补零
          if (index > 1 && index !== 3) {
            sums[index] = isNaN(sums[index] * 1)
              ? '0.00'
              : Number(sums[index] * 1).toFixed(2)
          }
        })
        return sums
      },
      moveImg(e) {
        var imgWrap = this.$refs.imgWrap
        var image = this.$refs.image
        const wrap = imgWrap
        const img = image
        const x = e.pageX - img.offsetLeft
        const y = e.pageY - img.offsetTop
        // 添加鼠标移动事件
        wrap.addEventListener('mousemove', move)
        function move(e) {
          img.style.left = e.pageX - x + 'px'
          img.style.top = e.pageY - y + 'px'
        }
        // 添加鼠标抬起事件，鼠标抬起，将事件移除
        img.addEventListener('mouseup', () => {
          wrap.removeEventListener('mousemove', move)
        })
        // 鼠标离开父级元素，把事件移除
        wrap.addEventListener('mouseout', () => {
          wrap.removeEventListener('mousemove', move)
        })
      },
      // 图片双击
      imgDblclick(e) {
        console.log('e', e)
        const obj = {
          1: 'rotate(-90deg)',
          2: 'rotate(-180deg)',
          3: 'rotate(-270deg)',
          4: 'rotate(-360deg)'
        }
        this.clickNum++
        var image = this.$refs.image
        if (this.clickNum > 4) {
          this.clickNum = 1
          image.style.transform = obj[this.clickNum]
        } else {
          image.style.transform = obj[this.clickNum]
        }
      },
      // 编辑
      async openNormalReceipts() {
        this.readOnly = true
        const res = await customerInfo({ csmCode: this.temp.csmCode })
        // 查询押金单详情
        const res1 = await queryCashPledgeDetail({
          depCode: this.temp.depositCode,
          depositId: this.temp.depositId,
          depStatus: this.temp.depStatus
        })
        this.readOnly = false
        const obj = {
          ...res.data, // 用户信息
          depositCode: this.temp.depositCode, // 押金单号
          ckOrgSNNo: this.temp.ckOrgSNNo, // 押瓶机构
          ckOrgName: this.temp.ckOrgName,
          ckOrgId: this.temp.ckOrgId,
          depReceiver: this.temp.depReceiver, // 收款人
          beginDt: this.temp.beginDt, // 开始时间
          calcType: this.temp.calcType, // 收款方式
          fee1: this.temp.fee1, // 手续费
          remark: this.temp.remark,
          billCode: this.temp.billCode, // 收据单号
          paymentMethod: this.temp.paymentMethod, // 支付方式
          transactorId: this.temp.transactorId, // 经办人
          transactor: this.temp.transactor, // 经办人名称
          transactDt: this.temp.transactDt, // 经办时间
          depositDetails: res1.data.depositDetails ? res1.data.depositDetails : [],
          depositId: this.temp.depositId,
          csmRgPhone: this.temp.csmPhone,
          csmRgAddress: this.temp.csmAddress,
          csmAddressId: res1.data.csmAddressId ? res1.data.csmAddressId : 0
        }
        this.$refs.normalReceiptsAdd.open(obj, 'edit')
        this.visible = false
      },
      // 收款支付
      async openReceipt() {
        if (this.temp.payStatus === 3) {
          this.$message.warning('当前订单已重复支付请勿重复支付')
          return
        }
        this.$refs.receipt.open(this.temp)
        this.visible = false
      },
      // 审核
      openDepositAudit() {
        this.$refs.depositAudit.open(this.temp)
        this.visible = false
      },
      // 退瓶消单
      openTurnOrder() {
        this.$refs.turnOrder.open(this.temp)
        this.visible = false
      },
      // 提瓶
      async liftingBottle(row) {
        this.$refs.liftingBottle.open(row)
        this.visible = false
      },
      // 提瓶撤回
      liftingBottleReturn(row) {
        this.$confirm(`确认要执行操作吗`, '提示', {
          type: 'warning'
        }).then(() => {
          depositCancelTakeBottle({ depCode: row.depositCode }).then(res => {
            this.$message({
              title: '提示',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.parentFetchData()
            this.visible = false
          })
        })
      },
      // 出库
      outStore(row) {
        this.$confirm(`请确认是否要进行出库操作`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning'
        }).then(() => {
          depositTakeOutBottle({ depositCode: row.depositCode }).then(res => {
            this.$notify({
              title: '提示',
              message: '操作成功!',
              type: 'success',
              duration: 2000
            })
            this.parentFetchData()
            this.visible = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 出库撤回
      outStoreReturn(row) {
        this.$confirm(`请确认是否要进行出库撤销操作`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning'
        }).then(() => {
          depositCancelTakeOutBottle({ depositCode: row.depositCode }).then(res => {
            this.$notify({
              title: '提示',
              message: '操作成功!',
              type: 'success',
              duration: 2000
            })
            this.parentFetchData()
            this.visible = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 拆单
      splitOrder(row) {
        this.$confirm(`当前押金单包含<strong style="color:red">${row.totalCount}</strong>个气瓶，是否为每个气瓶生成单独的押金单？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          dangerouslyUseHTMLString: true,
          type: 'warning'
        }).then(() => {
          depositExcreteDepositCodes({ depositCode: row.depositCode }).then(res => {
            this.$notify({
              title: '提示',
              message: '操作成功!',
              type: 'success',
              duration: 2000
            })
            this.parentFetchData()
            this.visible = false
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      },
      // 回执确认
      async openReceiptConfirm(row) {
        this.$refs.receiptConfirm.open(row)
        this.visible = false
      },
      // 已审核编辑
      toAuditedEdit(row) {
        this.$refs.auditedEdit.open(row)
        this.visible = false
      },
      // 消单确认
      openOrderConfirmationNew() {
        this.$refs.orderConfirmationNew.open(this.temp)
        this.visible = false
      },
      // 租瓶反审核
      revertAudit() {
        this.$confirm('是否确定执行租瓶反审核操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { status } = await queryRevertAudit({
            depositCode: this.temp.depositCode
          })
          if (status === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.parentFetchData()
            this.visible = false
          }
        })
      },
      // 退瓶反消单
      revertReturn() {
        this.$confirm('是否确定执行退瓶反消单操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { status } = await queryRevertReturn({
            depositCode: this.temp.depositCode
          })
          if (status === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.parentFetchData()
            this.visible = false
          }
        })
      },
      // 作废
      onCancellation() {
        this.$confirm('确认要执行操作吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          const { status } = await queryCashPledgeInvalid({
            depCode: this.temp.depositCode
          })
          if (status === 200) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.parentFetchData()
            this.visible = false
          }
        })
      },
      async toUploadContract(row) {
        await this.$refs.uploadContract.open(row)
        this.parentFetchData()
        this.visible = false
      },
      // 电子合同
      async showEleContact(row) {
        const res = await showEleContact({ depositCode: row.depositCode })
        const url = res.data
        var m = document.createElement('a')
        m.href = url
        m.target = '_blank'
        document.body.appendChild(m)
        m.click()
      },
      // 打印
      async  printDep() {
        const res = await queryCashPledgeDetail({
          depCode: this.temp.depositCode,
          depositId: this.temp.depositId,
          depStatus: this.temp.depStatus
        })
        const row = res.data
        var cache = JSON.parse(localStorage.tp)
        if (!cache) {
          this.$message.warning('请先设置打印模板')
          return
        }

        var temp = cache['15']
        if (!temp) {
          this.$message.warning('请先设置打印模板')
          return
        }

        var printcmd = {
          'cmd': 2,
          'title': `正在对押金单${this.temp.depositCode}进行打印`,
          'elements': []
        }
        printcmd = { ...printcmd, ...temp }
        if (row.paymentMethod === 1) {
          row.paymentMethod = '现金'
        } else if (row.paymentMethod === 2) {
          row.paymentMethod = '微信支付'
        } else {
          row.paymentMethod = ''
        }
        var items = row.depositDetails
        if (items) {
          row.deposit = items[0].deposit
        }

        if (row.payStatus === 3) {
          row.printMoney = `${row.totalDeposit} 已支付${row.paymentMethod}`
        }
        if (!window.jCPrint || !window.jCPrint.ws) {
          this.$message.error('打印未连接', 5000)
          return
        }
        window.jCPrint.process(printcmd, temp, row, items)
        if (window.jCPrint.send(JSON.stringify(printcmd))) { this.$message.success('打印指令已发送') } else {
          this.$message.error('打印未连接', 5000)
        }
      },
      // 打印
      async  printDepNew(data) {
        const res = await queryCashPledgeDetail({
          depCode: data.depositCode,
          depositId: data.depositId,
          depStatus: data.depStatus
        })
        this.tryPrint(res.data)
      },
      async tryPrint(row) {
        var cache = JSON.parse(localStorage.tp)
        if (!cache) {
          this.$message.warning('请先设置打印模板')
          return
        }

        var temp = cache['15']
        if (!temp) {
          this.$message.warning('请先设置打印模板')
          return
        }

        var printcmd = {
          'cmd': 2,
          'title': `正在对押金单${row.depositCode}进行打印`,
          'elements': []
        }
        printcmd = { ...printcmd, ...temp }
        row.beginDate = row.auditDt ? parseTime(row.auditDt, '{y}-{m}-{d}') : ''
        row.csmAddress = (row.csmAddress || '').replace(/.+?(省|市)/g, '')
        if (row.paymentMethod === 1) {
          row.paymentMethod = '现金'
        } else if (row.paymentMethod === 2) {
          row.paymentMethod = '微信支付'
        } else {
          row.paymentMethod = ''
        }
        var items = row.depositDetails
        var count1 = 0
        var count2 = 0
        var count3 = 0
        for (var i in items) {
          var item = items[i]
          if (item.goodsName.startsWith('5')) {
            count1++
          }
          if (item.goodsName.startsWith('15')) {
            count2++
          }
          if (item.goodsName.startsWith('50')) {
            count3++
          }
        }
        if (count1 === 0) {
          items.push({ 'goodsName': '5kg', 'goodsCount': 0 })
        }
        if (count2 === 0) {
          items.push({ 'goodsName': '15kg', 'goodsCount': 0 })
        }
        if (count3 === 0) {
          items.push({ 'goodsName': '50kg', 'goodsCount': 0 })
        }
        items.sort((a, b) => {
          var num1 = a.goodsName.replace(/[^0-9]/ig, '')
          var num2 = b.goodsName.replace(/[^0-9]/ig, '')
          return num2 - num1
        })
        row.deposit = items[0].deposit
        if (row.payStatus === 3) {
          row.printMoney = `${row.totalDeposit} 已支付${row.paymentMethod}`
        }
        if (row.csmType !== 1) {
          const res2 = await customerAttachment({ csmCode: row.csmCode })
          if (res2.data) {
            row.csmNewName = row.csmName + (res2.data.sfzName || '')
            if (res2.data.cardItems) {
              for (const i in res2.data.cardItems) {
                if (res2.data.cardItems[i].cardType === 4) {
                  row.csmNewCardNo = (res2.data.sfzh || '') + (res2.data.cardItems[i].cardNo || '')
                }
              }
            } else {
              row.csmNewCardNo = res2.data.sfzh || ''
            }
            window.jCPrint.process(printcmd, temp, row, items)
            if (window.jCPrint.send(JSON.stringify(printcmd))) {
              this.$message.success('打印指令已发送')
            } else {
              this.$message.error('打印未连接', 5000)
            }
          }
        } else {
          row.csmNewCardNo = row.csmCarNo
          row.csmNewName = row.csmName
          window.jCPrint.process(printcmd, temp, row, items)
          if (window.jCPrint.send(JSON.stringify(printcmd))) {
            this.$message.success('打印指令已发送')
          } else {
            this.$message.error('打印未连接', 5000)
          }
        }
      },
      // 退瓶/退款打印
      async returnPrint(data, type) {
        const res = await queryCashPledgeDetail({
          depCode: data.depositCode,
          depositId: data.depositId,
          depStatus: data.depStatus
        })
        this.tryPrint1(res.data, type)
      },
      async tryPrint1(row, type) {
        var cache = JSON.parse(localStorage.tp)
        if (!cache) {
          this.$message.warning('请先设置打印模板')
          return
        }
        var temp = ''
        if (type === 1) {
          temp = cache['32']
        } else {
          temp = cache['33']
        }
        if (!temp) {
          this.$message.warning('请先设置打印模板')
          return
        }

        var printcmd = {
          'cmd': 2,
          'title': `正在对押金单${row.depositCode}进行打印`,
          'elements': []
        }
        printcmd = { ...printcmd, ...temp }
        var items = row.depositDetails
        var count1 = ''
        var count2 = ''
        var count3 = ''
        var count4 = ''
        var count5 = ''
        var count6 = ''
        for (var i in items) {
          var item = items[i]
          if (item.goodsName.startsWith('15')) {
            count1 = item.goodsCount
            count2 = item.deposit
            count5 = item.rental
          }
          if (item.goodsName.startsWith('50')) {
            count3 = item.goodsCount
            count4 = item.deposit
            count6 = item.rental
          }
        }
        row.count1 = count1
        row.count2 = count2
        row.count3 = count3
        row.count4 = count4
        row.count5 = count5
        row.count6 = count6
        var date1 = row.endDt ? parseTime(row.endDt, '{y}-{m}-{d}') : ''
        var date2 = row.beginDt ? parseTime(row.beginDt, '{y}-{m}-{d}') : ''
        date1 = date1.split('-')
        date1 = parseInt(date1[0]) * 12 + parseInt(date1[1]) * 1
        date2 = date2.split('-')
        date2 = parseInt(date2[0]) * 12 + parseInt(date2[1]) * 1
        if (count1) {
          row.month1 = Math.abs(date1 - date2) + 1
        }
        if (count3) {
          row.month2 = Math.abs(date1 - date2) + 1
        }
        row.csmNewCardNo = row.csmCardNo + '(卡号 ' + row.csmCode + ')'
        row.csmNewName = row.csmName
        row.operateDt = row.operateDt ? parseTime(row.operateDt, '{y}-{m}-{d} {h}:{i}') : ''
        row.signDt = row.operateDt ? parseTime(row.operateDt, '{y} {m} {d}') : ''
        window.jCPrint.process(printcmd, temp, row, items)
        if (window.jCPrint.send(JSON.stringify(printcmd))) {
          this.$message.success('打印指令已发送')
        } else {
          this.$message.error('打印未连接', 5000)
        }
      },
      upDataTable() {
        this.parentFetchData()
      },
      getPermission(scope) {
        // 超级管理员返回所有用户权限
        if (store.getters.userInfo && store.getters.userInfo.expand1 === '1') return true
        const csmRouter = this.menusArr.find(item => item.menuId === 202) // 押金管理
        if (!csmRouter.btnScope) return true
        const btnScopes = [csmRouter.btnScope]
        console.log('btnScopes', btnScopes.some(btnScope => btnScope >> (scope - 1) & 0x01))
        return btnScopes.some(btnScope => btnScope >> (scope - 1) & 0x01)
      },
      // 关闭
      reset() {
        this.visible = false
        this.infoTy = 'info'
        this.check_field = false
        this.returned_field = false
      },
      // 占用瓶
      async openOccupy(row) {
        await this.$refs.occupy.open(row)
      }
    }
  }
</script>

<style lang="scss" scoped>
/deep/.el-drawer {
  width: 80% !important;
}
// /deep/ .el-descriptions-item__label {
//   // overflow: hidden;
//   // text-overflow: ellipsis;
//   // white-space: nowrap;
//   // width: 70px;
// }
/deep/ .el-descriptions-item__content:not(.descFullContent) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title {
  display: flex;
  padding: 20px 20px 0 20px;
  margin-bottom: 20px;
  .title-text {
    line-height: 25px;
  }
  .tag {
    margin: 0 10px;
  }
}
.popups-info {
  display: flex;
  justify-content: space-between;
  height: calc(100vh - 140px);
  padding: 0 20px;
  overflow-y: auto;
  flex-wrap: wrap;
  .form {
    width: 70%;
    /deep/ .el-collapse-item__content {
      padding-bottom: 10px;
    }
    /deep/ .el-collapse-item__header {
      font-size: 14px;
      font-weight: 700;
      color: #38BDBD;
    }
    .image {
      width: 200px;
      height: 120px;
      margin-right: 10px;
    }
  }
  .timeline {
    width: 28%;
    .timeline-title {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      color: white;
      background-color: #38BDBD;
      border-radius: 5px;
    }
  }
  .lb-table {
    overflow: auto;
    overflow-y: auto;
  }
}
.bottom {
  position: fixed;
  bottom: 0;
  z-index: 99;
  width: 80%;
  height: 55px;
  background: white;
  border: 2px solid #DCDFE6;
  .btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-right: 10px;
    .btns {
      display: flex;
      margin-left: 15px;
    }
  }
}
/deep/ .el-descriptions .is-bordered {
  table-layout: fixed;
}
.csmCode {
  color: #38BDBD;
  cursor: pointer;
}
.sweepBottle {
  /deep/.c-label {
    background-color: #f1f1f1;
  }
}

</style>
